<template>
    <el-dialog
        width="50%"
        custom-class="customWidth"
        center
        :before-close="closeDialog"
        title="加入人员"
        :close-on-click-modal="false"
        append-to-body
        :visible.sync="addDialogFormVisible">
         <el-form :inline="true" :model="dataForm" ref="dataForm" class="elformcss">
            <el-form-item label="部门" prop="departmentGuid">
                 <el-cascader size="mini" v-model="departmentGuid" :options="deptTree" ref="cascaderAddDept" placeholder="请选择部门" @change="handleChangeDept"  clearable></el-cascader>
            </el-form-item>
            <el-form-item label="姓名" prop="username">
                <el-input v-model="dataForm.username"  size="mini" clearable></el-input>
            </el-form-item>
            <el-form-item label="编号" prop="userNumber">
                <el-input v-model="dataForm.userNumber"  size="mini" clearable></el-input>
            </el-form-item>
            <el-form-item label="卡号" prop="carnumber">
                <el-input v-model="dataForm.carnumber"  size="mini" clearable></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="searchifo" size="mini">查询</el-button>
            </el-form-item>         
          </el-form>
          <el-table
               ref="multipleTable"
               :data="tableData"
               tooltip-effect="dark"
               style="width: 100%"
               :stripe="true"
               border
               :header-cell-style="headFirst"
               @selection-change="handleSelectionChange">
               <el-table-column
                 type="selection"
                 width="55">
               </el-table-column>
                <el-table-column
                 prop="departmentName"
                 label="部门"
                >
               </el-table-column>
               <el-table-column
                 prop="userName"
                 label="姓名"
               >
               </el-table-column>
               <el-table-column
                 prop="userNumber"
                 label="编号"
               >
               
               </el-table-column>
               <el-table-column
                 prop="cardNumber"
                 label="卡号"
                >
               </el-table-column>
              
          </el-table>       
          <div class="page">
            <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChangepage"
               :current-page="currentPage"
               :page-sizes="[10, 20, 30, 40]"
               :page-size="pageSize"
               layout="total, sizes, prev, pager, next"
               :total="recordCount"
             >
            </el-pagination>
          </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addvisible ()">取消</el-button>
          <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
           addDialogFormVisible:false,
           dataForm:{
             username:'',
             carnumber:'',  
             userNumber:""
           },
           departmentGuid:[],
           deptTree:[],
           tableData:[],
           pageNum:1,
           pageSize:10,
           recordCount:0,
           currentPage:1,
           searchInfo:{

           },
           selectarr:[],
           roomGuid:'',
        }
    },
    computed: {
        changeschoolid:{
            get () { 
                return this.$store.state.user.changeschoolid 
            },
        }
    },
    mounted() {
        this.getDeptTree()
    },
    methods: {
        closeDialog(done){
            this.addDialogFormVisible=false
            done()
        },
        addvisible(){
            this.departmentGuid=[]
            this.tableData=[]
            this.$refs['dataForm'].resetFields()
            this.addDialogFormVisible=false
        },
        addataFormSubmit(){
            if(this.selectarr.length<1){
                this.$message({
                    message: '请选择人员',
                    type: 'warning'
                });
                return
            }
            this.$refs['dataForm'].resetFields()
            this.bindroomstudent()
        },
        addinit(roomGuid){
            this.roomGuid=roomGuid
            this.addDialogFormVisible=true
        },
        handleChangeDept(){
            console.log(this.departmentGuid)
        },
        searchifo(){
            this.pageNum = 1;
            this.getdepartmentinfo()
        },
        handleSelectionChange(val){
            this.selectarr=[]
            for(var i=0;i<val.length;i++){
                this.selectarr.push(val[i].userGuid)
            }
            // console.log(this.selectarr)
        },
        //部门信息
        getDeptTree(){
            this.$http({
                url: this.$http.adornUrl("/department/select-department-tree"),
                method: "post",
                data: this.$http.adornData({
                    messageContent: this.changeschoolid,
                    messageType: 0
                })
            }).then(({ data }) => {
                if (data.messageCode == 200) {
                    console.log(data.messageContent)
                    this.deptTree = data.messageContent;
                    this.recursiveget(this.deptTree);
                    // console.log(JSON.stringify(this.deptTree));
                }else{
                    this.$message.error(data.errorMessage)
                }
            });
        },
         //递归添加
        recursiveget(deptTree) {
            for (var i in deptTree) {
                deptTree[i].value = deptTree[i].departmentGuid;
                deptTree[i].label = deptTree[i].departmentName;
                if (deptTree[i].children.length == 0){
                    delete deptTree[i].children;
                }else{
                    this.recursiveget(deptTree[i].children);
                } 
            }
        },
        //获取部门简要信息
        getdepartmentinfo(){
            this.searchInfo={}
            this.searchInfo.unitGuid=this.changeschoolid
            if(this.departmentGuid!=[]){
                let departmentGuid = this.departmentGuid[this.departmentGuid.length-1]
                this.searchInfo.departmentGuid=departmentGuid
            }
            if(this.dataForm.carnumber!=''){
                this.searchInfo.cardNumber=this.dataForm.carnumber
            }
            if(this.dataForm.username!=''){
                this.searchInfo.userName=this.dataForm.username
            }
            if(this.dataForm.userNumber!=''){
                this.searchInfo.userNumber=this.dataForm.userNumber
            }
            this.$http({
                url: this.$http.adornUrl("/department/select-department-child-page"),
                method: "post",
                data: this.$http.adornData({
                    messageContent:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        searchInfo:this.searchInfo
                    },
                    messageType: 0
                })
            }).then(({ data }) => {
                if (data.messageCode == 200) {
                    console.log(data)
                    this.tableData=data.messageContent.data
                    this.recordCount=data.messageContent.recordCount
                    this.currentPage=data.messageContent.pageNum
                }else{
                    this.$message.error(data.errorMessage)
                }
            });
        },
        handleSizeChange(val){
            this.pageSize=val;
            this.getdepartmentinfo();
        },
        handleCurrentChangepage(val){
            this.pageNum=val;
            this.getdepartmentinfo();

        },
        //房间分配绑定学生
        bindroomstudent(){
            this.$http({
                url: this.$http.adornUrl("/area/room/bind-room-user"),
                method: "post",
                data: this.$http.adornData({
                    messageContent:{
                        roomGuid:this.roomGuid,
                        userGuidList:this.selectarr
                    },
                    messageType: 0
                })
            }).then(({ data }) => {
                if (data.messageCode == 200) {
                     this.departmentGuid=[]
                     this.tableData=[]
                     this.$refs['dataForm'].resetFields()
                     this.$message({
                        message: '绑定人员成功',
                        type: 'success',
                        duration: 200,
                        onClose: () => {
                          this.addDialogFormVisible=false
                          this.$emit('refreshDataList')
                        }
                     });
                    // console.log(JSON.stringify(this.deptTree));
                }else{
                    this.$message.error(data.errorMessage)
                }
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.el-form-item{
    margin-bottom: 10px;
}
.elformcss{
    margin-bottom: 10px;
    border-bottom: 1px solid #e5e9f2;
}
.page{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>